<template>
  <view class="activity-banner-container">
    <uni-swiper-dot :info="dataListDemo" :current="current">
      <swiper class="swiper-box" @change="change">
        <swiper-item v-for="(item ,index) in dataListDemo" :key="index">
          <view class="swiper-item" @click="bannerItemClick(item)">
            <image class="img" :src="item.imgUrl"></image>/
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const props = defineProps({
  dataList: Array
});
const current = ref(0);
const change = (e)=>{
  current.value = e.detail.current;
}
const bannerItemClick = (item)=>{
  console.info(item)
}

const dataListDemo = [
  {
    imgUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/0d3a449c950d4d358837626166e55e70.png',
    linkUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/0d3a449c950d4d358837626166e55e70.png',
  },
  {
    imgUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/3b53edbc4b7544cd8250d4d43181fc6c.jpg',
    linkUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/3b53edbc4b7544cd8250d4d43181fc6c.jpg'
  },
  {
    imgUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/bb77a3c5078e4d51b58cf1d4be35ebf0.jpg',
    linkUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/bb77a3c5078e4d51b58cf1d4be35ebf0.jpg'
  },
  {
    imgUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/3b53edbc4b7544cd8250d4d43181fc6c.jpg',
    linkUrl: 'http://scdpsit.suning.com/miniio/snbns/2024/09/3b53edbc4b7544cd8250d4d43181fc6c.jpg'
  }
]
</script>
<style lang="scss" scoped>
.activity-banner-container{
  width: 686rpx;
  height: 250rpx;
  margin-left: 32rpx;
  .swiper-box{
    height: 250rpx;
  }

  .swiper-item{
    width: 100%;
    height: 100%;
    .img{
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
}
</style>